import React, {Component} from 'react'
import {List, NavBar, Icon, Modal} from 'antd-mobile'
import {connect} from 'react-redux'
import DefaultLayout from '../../layouts/default_layout'
import {withRouter} from 'react-router-dom'
import {modal, post} from '../../common/js/utils'
import {setUserInfo} from '../../actions'

const Item = List.Item

function mapStateToProps(state, props) {
  return {
    userInfo: state.userInfo
  }
}

const mapDispatchToProps = dispatch => {
  return {
    setUserInfo(value) {
      dispatch(setUserInfo(value))
    }
  }
}

@connect(mapStateToProps, mapDispatchToProps)
@withRouter
class UserInfo extends Component {

  updateNickname = (nickname) => {
    post('/users/nickname', {
      nickname
    }, loading => { modal.loading(loading) } ).then(res => {
      if (res.result === 1) {
        modal.toast(res.mes)
        this.props.setUserInfo(res.data)
      }
    })
  }

  updateSex = (sex) => {
    post('/users/sex', {sex}, loading => { modal.loading(loading) }).then(res => {
      if (res.result === 1) {
        this.props.setUserInfo(res.data)
      }
    })
  }

  updateAge = (age) => {
    return new Promise((reslove, reject) => {
      if (/^[1-9]\d*$/.test(age)) {
        post('/users/age', {age}, loading => { modal.loading(loading) }).then(res => {
          this.props.setUserInfo(res.data)
          reslove()
        }).catch(() => {
          reject()
        })
      } else {
        modal.toast('请输入正确的年龄')
        reject()
      }
    })
  }

  render() {
    const {history, userInfo} = this.props
    return (
      <DefaultLayout
        header={
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => {
              history.go(-1)
            }}
          >基本信息</NavBar>
        }
      >
        <List className="my-list">
          <Item
            extra={
              <img src={userInfo.avatar} alt="用户头像"/>
            }
            arrow="horizontal"
            onClick={e => {
              history.push('/avatar')
            }}
          >头像</Item>
          <Item
            extra={userInfo.nickname}
            arrow="horizontal"
            onClick={e => {
              modal.prompt({
                title: '修改昵称',
                defaultValue: userInfo.nickname || ''
              }).then(res => {
                this.updateNickname(res)
              })
            }}
          >昵称</Item>
          <Item
            extra={
              userInfo.sex === 1
                ? <div><i style={{color: 'rgb(117, 185, 235)'}} className="riconfont ricon-nan" />  男</div>
                : <div><i style={{color: 'rgb(255, 62, 201)'}} className="riconfont ricon-nv" />  女</div>
            }
            arrow="horizontal"
            onClick={e => {
              Modal.operation([
                { text: <div><i style={{color: 'rgb(117, 185, 235)'}} className="riconfont ricon-nan" />  男</div>, onPress: () => {this.updateSex(1)} },
                { text: <div><i style={{color: 'rgb(255, 62, 201)'}} className="riconfont ricon-nv" />  女</div>, onPress: () => {this.updateSex(0)} }
              ])
            }}
          >性别</Item>
          <Item
            extra={userInfo.age || '未设置'}
            arrow="horizontal"
            onClick={e => {
              modal.prompt({
                title: '修改年龄',
                defaultValue: userInfo.age || '',
                promise: this.updateAge
              })
            }}
          >年龄</Item>
          <Item
            arrow="horizontal"
            onClick={e => {
              history.push('/password')
            }}
          >修改密码</Item>
        </List>
      </DefaultLayout>
    )
  }
}

export default UserInfo
